<template>
	<div>
		<iframe id="liveEditor" frameborder="0" style="width:100%;height:400px;"
			src="https://latexeasy.com/editor"></iframe>
		<div class="row-me flex-end margin-top20">
			<el-button @click="close">取消</el-button>
			<el-button type="primary" id="actionGetSvg">确认</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['content'],
		data() {
			return {
				letexeasy: {}
			}
		},
		mounted() {
			let that = this;
			(function() {
				var letexeasy = new window.LatexEasy(document.getElementById('liveEditor'));
				letexeasy.on('ready', function() {
					console.log('LatexEasy.ready');
					letexeasy.call('set.latex', {
						latex: that.content || ''
					});
				});
				letexeasy.init();
				document.getElementById('actionGetSvg').addEventListener('click', function() {
					letexeasy.call('get.svg', {}, function(data) {
						that.$emit('handleOk', data)
					});
				});
			})();
		},
		methods: {
			close() {
				this.$emit('handleOk', 0)
			}
		}
	}
</script>

<style>
</style>